<template>
  <span :style="{width:width +'px',height:width + 'px'}" class="icon">
    <img :src="getImage()" :style="{'object-fit':fit}"/>
  </span>
</template>

<script setup>
    import { propsToAttrMap } from "@vue/shared";
import { ref, reactive, getCurrentInstance} from "vue";
    const { proxy} = getCurrentInstance();
    const props = defineProps({
        fileType:{
            type:Number,
        },
        iconName:{
            type:String,
        },
        cover:{
            type:String,
        },
        width:{
            type:Number,
            default:32,
        },
        fit:{
            type:String,
            default:"cover"
        },
    });
    const fileTypeMap = {
        0:{desc:"目录",icon:"folder"},
        1:{desc:"视频",icon:"video"},
        2:{desc:"音频",icon:"music"},
        3:{desc:"图片",icon:"image"},
        4:{desc:"pdf",icon:"pdf"},
        5:{desc:"doc",icon:"word"},
        6:{desc:"excel",icon:"excel"},
        7:{desc:"txt",icon:"txt"},
        8:{desc:"code",icon:"code"},
        9:{desc:"zip",icon:"zip"},
        10:{desc:"其他",icon:"others"},
    };
    const getImage = ()=>{
        // 视频和图片根据接口获取
        if(props.cover){
            return proxy.globalInfo.imageUrl + props.cover;
        }
        let icon = "unknow_icon";
        // 根据文件的名字取
        if(props.iconName){
            icon=props.iconName;
        }else{
            // 根据文件类型取
            const iconMap = fileTypeMap[props.fileType];
            if(iconMap != undefined){
                icon= iconMap["icon"];
            }
        }
        return new URL(`/src/assets/icon-image/${icon}.png`,import.meta.url).href;
    };
</script>

<style lang="scss" scoped>
.icon {
    text-align: center;
    display: inline-block;
    border-radius: 3px;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>